<template>
  <el-row style="padding: 15px 0 15px 0;">
    <el-col :span="4">
      <span style="line-height: 30px;">{{ keyName }}{{ syncValue }}</span>
    </el-col>
    <el-col :span="6" style="height: 30px;">
      <el-input
        v-model="myValue"
        placeholder="请输入内容"
        style="font-size: 14px;"
        class="input"
        @blur="change"
      ></el-input>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class ArrayView extends Vue {
  @Prop(String)
  public keyName: string;

  @Prop(Array)
  public value: any[];

  public myValue: string;

  constructor(...args: any) {
    super(...args);
    this.myValue = this.value.join(",");
  }

  public change() {
    const value = this.myValue.split(",").filter((item) => item !== "");
    if (value.join(",") !== this.value.join(",")) {
      this.$emit("change", this.keyName, value);
    }
  }

  get syncValue() {
    this.myValue = this.value.join(",");
    return this.value ? "" : "";
  }
}
</script>

<style scoped>
.input /deep/ .el-input__inner {
    color: #000;
}
</style>